<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="商品名称">
              <a-input v-model="queryParam.name" placeholder=""/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="商品编号">
              <a-input v-model="queryParam.numbering" placeholder=""/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="供应商">
              <supplier-select v-model="queryParam.supplier_id"></supplier-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="更新时间">
              <a-range-picker :allowClear="true" ref="updatedAtRangePicker" @change="updatedAtRangePickerOnChange"/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="商品类别">
              <commodity-category-selection v-model="queryParam.category"></commodity-category-selection>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <span class="table-page-search-submitButtons">
              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
              <a-button style="margin-left: 8px" @click="handleReset">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <div class="table-operator">
      <a-button type="primary" icon="plus" @click="() => {this.$router.push('/commodity/commodity/create')}">新建
      </a-button>
    </div>

    <s-table
      ref="table"
      size="default"
      rowKey="id"
      :columns="columns"
      :data="loadData"
      showPagination="auto"
    >
      <span slot="name" slot-scope="text, record">
        <a-row type="flex">
          <a-col>
            <img v-if="record.attachments[0]" width="100px" :src="record.attachments[0].url"/>
          </a-col>
          <a-col offset="1">
            <a-row :gutter="[24, 32]">
              <a-col>{{ record.name }}</a-col>
              <a-col style="color: #8d8d8d">{{ record.numbering }}</a-col>
            </a-row>
          </a-col>
        </a-row>
      </span>

      <span slot="action" slot-scope="text, record">
        <template>
          <a @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical"/>
          <a-popconfirm placement="top" @confirm="handleDelete(record)">
            <template slot="title">
              确定要删除吗?
            </template>
            <a>删除</a>
          </a-popconfirm>
        </template>
      </span>
    </s-table>
  </a-card>
</template>

<script>
  import moment from 'moment'
  import { Ellipsis, STable } from '@/components'
  import { saveManager } from '@/api/system'
  import { deleteCommodity, getCommodityList } from '@/api/commodity'
  import CommodityCategorySelection from '@/components/CommodityCategorySelection/CommodityCategorySelection'
  import SupplierSelect from '@/components/SupplierSelect/SupplierSelect'

  export default {
    name: 'List',
    components: {
      SupplierSelect,
      CommodityCategorySelection,
      STable,
      Ellipsis
    },
    data () {
      return {
        mdl: {},
        // 查询参数
        queryParam: {},
        // 表头
        columns: [
          {
            title: '商品名称',
            scopedSlots: { customRender: 'name' }
          },
          {
            title: '商品类别',
            dataIndex: 'category.name'
          },
          {
            title: '供应商',
            dataIndex: 'supplier.name'
          },
          {
            title: '售后率',
            customRender: item => {
              if ((item.after_sale_orders_count || 0) === 0 || (item.orders_count || 0) === 0) {
                return '0%'
              }

              return (Math.round(((item.after_sale_orders_count || 0) / (item.orders_count || 0)) * 10000) / 100) + '%'
            }
          },
          {
            title: '已关联活动',
            dataIndex: 'commodity_activities_count'
          },
          {
            title: '更新时间',
            dataIndex: 'updated_at'
          },
          {
            title: '操作',
            dataIndex: 'action',
            width: '150px',
            scopedSlots: { customRender: 'action' }
          }
        ],
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          return getCommodityList(Object.assign(parameter, this.queryParam)).then(res => {
            return res
          })
        },
        selectedRowKeys: [],
        selectedRows: []
      }
    },
    created () {

    },
    methods: {
      updatedAtRangePickerOnChange (date, dateString) {
        this.queryParam.updated_at_begin = dateString[0]
        this.queryParam.updated_at_end = dateString[1]
      },
      handleEdit (record) {
        this.$router.push({ name: 'commodity_edit', params: { id: record.id } })
      },
      handleOk () {
        this.$refs.table.refresh()
      },
      onSelectChange (selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      },
      resetSearchForm () {
        this.queryParam = {
          date: moment(new Date())
        }
      },
      handleReset () {
        this.queryParam = {}
        this.$refs.updatedAtRangePicker.$refs.picker.clearSelection(new MouseEvent('click'))
      },
      confirmStatusChange (record) {
        let status = 1
        if (record.status === 1) {
          status = 2
        }
        saveManager({ id: record.id, status: status }).then(() => this.$refs.table.refresh())
      },
      handleDelete (record) {
        if (record.commodity_activities_count > 0) {
          this.$error({
            title: '删除失败',
            content: '当前样品关联有活动商品，无法删除，请先移除接龙中的商品再尝试删除。'
          })
          return
        }

        deleteCommodity(record.id).then(res => this.$refs.table.refresh())
      }
    }
  }
</script>
